<template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="6em">
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="用户头像" prop="avatar">
                    <el-upload-image v-model="formData.avatar"></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="权限组" prop="rule_arr">
                    <el-cascader v-model="formData.rule_arr" :options="roleData" :props="props" clearable></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="管理中心" prop="pid">
                    <el-select v-model="formData.pid" filterable placeholder="请选择管理中心">
                        <el-option v-for="item in adminUser" :key="item.id" :label="item.nickname" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="部门" prop="department">
                    <el-select v-model="formData.department" filterable placeholder="请选择部门">
                        <el-option v-for="item in department" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="formData.username" placeholder="请输入3-15位的字母加数字的组合" maxlength="15" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" placeholder="请输入6-32位的字母加数字的组合" maxlength="32" type="password" show-password clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="formData.nickname" placeholder="示例: 管理员" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="formData.email" placeholder="示例: 12346@email.com" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="formData.mobile" placeholder="示例: 13888888888" maxlength="11" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch v-model="formData.status" active-value="1" inactive-value="0"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
            <el-button type="primary" icon="el-icon-close" @click="onCancel">取消</el-button>
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "admin-add",
    props: {
        roleData: {
            type: Array,
            default: () => []
        },
        department: {
            type: Array,
            default: () => []
        },
        adminUser: {
            type: Array,
            default: () => []
        },
    },
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    data() {
        return {
            props: {
                label: "name",
                value: "id",
                children: "children",
                multiple: false,
                checkStrictly: true
            },
            formData: {
                avatar: [],
                username: "",
                password: "",
                nickname: "",
                rule_arr: [],
                email: "",
                mobile: "",
                status: "1",
                pid: "",
                department: ""
            },
            formRules: {
                username: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[a-zA-Z][a-zA-Z0-9_]{2,15}$/,
                        message: "格式错误"
                    }
                ],
                password: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+{};:,<.>/?]).{10,32}$/,
                        message: "格式错误"
                    }
                ],
                nickname: {
                    required: true,
                    message: "此项为必填项"
                },
                rule_arr: {
                    required: true,
                    message: "此项为必填项"
                },
                department: {
                    required: true,
                    message: "此项为必填项"
                },
                pid: {
                    required: true,
                    message: "此项为必填项"
                },
                email: {
                    pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
                    message: "邮箱格式错误",
                    trigger: "blur"
                },
                mobile: {
                    pattern: /^0?1[3|4|5|6|7|8][0-9]\d{8}$/,
                    message: "手机号格式错误",
                    trigger: "blur"
                },
            }
        };
    },
    methods: {
        onConfirm() {
            this.formData.identity = 2
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    // formData.group_arr = formData.rule_arr.map(item => {
                    //     return item[item.length - 1];
                    // });
                    formData.group_arr = [formData.rule_arr[formData.rule_arr.length - 1]]

                    if (formData.avatar.length > 0) {
                        // formData.avatar = "http://nhcj.app65.cn/" + formData.avatar[0].url;
                        formData.avatar = formData.avatar[0].url;

                    } else {
                        formData.avatar = "";
                    }
                    await post({
                        url: "/admin/auth.admin/add",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    this.$emit("update");
                    this.$parent.$emit("update:visible", false);
                    this.$refs.formRef.resetFields();
                }
            });
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    },

};
</script>
